<template lang="pug">
.m-content
  .title {{editCreateCompTitle}}
  .main
    el-form(ref="form" :model="postForm" label-width="100px")
      el-form-item(label="报表名称")
        el-input(v-model="postForm.name")
      el-form-item(label="报表类型")
        el-select(v-model="postForm.form_type" placeholder="请选择报表类型")
          el-option(label="工单报表" value="1")
          el-option(label="性能报表" value="2")
      .module(v-show="postForm.form_type === '1'")
        el-form-item(label="工单类型")
          el-select(v-model="postForm.order_type" placeholder="请选择工单类型")
            el-option(label="天翼云" value="1")
            el-option(label="IT云" value="2")
        el-form-item(label="产品类型")
          el-select(v-model="postForm.product_type" placeholder="请选择产品类型")
            el-option(label="云主机" value="1")
            el-option(label="运专线" value="2")
        el-form-item(label="动作类型")
          el-select(v-model="postForm.action_type" placeholder="请选择动作类型")
            el-option(label="新装" value="1")
            el-option(label="拆机" value="2")
        el-form-item(label="城市全选")
          el-switch(v-model="postForm.isAllAreaCodes")
        el-form-item(label="地市" v-if="!postForm.isAllAreaCodes")
          el-select(v-model="postForm.areaCodes" placeholder="请选择地市")
            el-option(label="南京" value="1")
            el-option(label="无锡" value="2")
      .module(v-show="postForm.form_type === '2'")
        el-form-item(label="设备类型")
          el-select(v-model="postForm.equipment_type" placeholder="请选择设备类型")
            el-option(label="云主机" value="1")
            el-option(label="磁盘" value="2")
        el-form-item(label="聚合方式")
          el-select(v-model="postForm.polymerization" placeholder="请选择聚合方式")
            el-option(label="region" value="1")
            el-option(label="az" value="2")
        el-form-item(label="资源池")
          el-select(v-model="postForm.resource_pool" placeholder="请选择资源池")
            el-option(label="region" value="1")
            el-option(label="az" value="2")
        el-form-item(label="资源类型")
          el-select(v-model="postForm.resource_type" placeholder="请选择资源类型")
            el-option(label="region" value="1")
            el-option(label="az" value="2")
        el-form-item(label="资源所属类型")
          el-select(v-model="postForm.resource_in_type" placeholder="请选择资源所属类型")
            el-option(label="region" value="1")
            el-option(label="az" value="2")
        el-form-item(label="资源所属az")
          el-select(v-model="postForm.resource_in_az" placeholder="请选择资源池")
            el-option(label="region" value="1")
            el-option(label="az" value="2")

      el-form-item(label="执行周期")
        el-col(:span="8")
          el-form-item
            el-select(v-model="postForm.looptime" placeholder="请选择执行周期").active
              el-option(label="一次" value="once")
              el-option(label="每天" value="day")
              el-option(label="每周" value="week")
              el-option(label="每月" value="month")
        el-col(:span="16")
          el-form-item
            el-date-picker(
              v-if="postForm.looptime==='once'"
              v-model="postForm.oncetimerange"
              type="datetimerange"
              value-format="timestamp"
              start-placeholder="统计时间(起)"
              end-placeholder="统计时间(止)")
            el-time-picker(
              v-if="postForm.looptime==='day'"
              is-range
              v-model="postForm.daytimerange"
              start-placeholder="统计时间(起)"
              end-placeholder="统计时间(止)")
            Weekview(v-if="loopweek" :is-week="true")
            Weekview(v-if="loopmonth" :is-week="false")
      el-form-item(label="执行时间")
        el-col(:span="8" v-if="executestatus")
          el-form-item
            el-select(v-if="loopweek" v-model="postForm.looptime_week" placeholder="请选择执行时间").active
              el-option(v-for="(week,index) in weeks" :label="week" :key="index" :value="index")
            el-select(v-if="loopmonth" v-model="postForm.looptime_month" placeholder="请选择执行时间").active
              el-option(v-for="(month,index) in months" :label="month" :key="index" :value="index")
        el-col(:span="LooptimeShort")
          el-form-item
            el-date-picker(
              v-model="postForm.datetimerange"
              type="datetimerange"
              value-format="timestamp"
              start-placeholder="统计时间(起)"
              end-placeholder="统计时间(止)")
      el-form-item(label="动作类型")
        el-radio-group(v-model="postForm.status")
          el-radio(label="启用")
          el-radio(label="不启用")
      el-form-item(label="报表字段")
        el-select(v-model="postForm.form_field" multiple placeholder="请选择")
          el-option(label="成员接入号" value="3")
          el-option(label="组合接入号" value="4")
      el-form-item
        el-button(type="primary") 确定
        el-button 取消
    br
    br
    br
    br

</template>
<script>
import Weekview from '@/components/weekview/index.vue'
const weeks = '周一 周二 周三 周四 周五 周六 周日'.split(' ')
const months = '一 二 三 四 五 六 七 八 九 十 十一 十二 十三 十四 十五 十六 十七 十八 十九 二十 二十一 二十二 二十三 二十四 二十五 二十六 二十七 二十八 二十九 三十 三十一'.split(' ')
const CREATE_NAME = '创建'
const EDIT_NAME = '编辑'
const defaultForm = {
  name: '', // 报表名称，
  form_type: '',

  order_type: '',
  product_type: '',
  action_type: '',
  isAllAreaCodes: false,
  areaCodes: '',

  equipment_type: '', // 设备类型
  polymerization: '', // 聚合方式
  resource_pool: '',
  resource_type: '',
  resource_in_type: '',
  resource_in_az: '',

  looptime: 'once',
  oncetimerange: [], // 一次
  daytimerange: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)], // 一天
  weektimerange: [], // 一周
  monthtimerange: [], // 一月
  datetimerange: [],

  looptime_week: '',
  looptime_month: '',
  executeTime: '',

  status: '',
  form_field: []

}
export default {
  name: 'EditCreateComp',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Weekview
  },
  data () {
    return {
      postForm: Object.assign({}, defaultForm),
      isLooptimeShort: true,
      weeks,
      months
    }
  },
  computed: {
    editCreateCompTitle () {
      return this.isEdit ? EDIT_NAME : CREATE_NAME
    },
    LooptimeShort () {
      let ret = this.postForm.looptime === 'week' || this.postForm.looptime === 'month'
      return ret ? 16 : 24
    },
    loopweek () {
      return this.postForm.looptime === 'week'
    },
    loopmonth () {
      return this.postForm.looptime === 'month'
    },
    executestatus () {
      return this.postForm.looptime === 'week' || this.postForm.looptime === 'month'
    }
  }

}
</script>
<style lang="stylus" scoped>
.m-content
  .el-form
    >
      .el-form-item
        width 480px
        .el-select
          width 100%
          &.active
            padding-right 10px
            // transform translateY(-1px)
        .el-date-editor
          width 100%
        .el-form-item
          margin-bottom 0
    .module
      .el-form-item
        width 480px
        .el-select
          width 100%

</style>
